<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>My Addresses - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    <style>
        .address-card {
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            transition: transform 0.2s;
        }
        .address-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        .address-card.default {
            border-color: #28a745;
            background-color: #f8fff9;
        }
        .default-badge {
            background-color: #28a745;
            color: white;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
        }
        .address-actions .btn {
            margin-right: 8px;
            margin-bottom: 8px;
        }
    </style>
</head>
<body class="my-addresses">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>My Addresses</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs">
                        <a th:href="@{/}" title="Back to the home page"><i class="an an-home icon-home"></i></a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <a th:href="@{/user/my-account}">My Account</a>
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <span>My Addresses</span>
                    </div>
                </div>
            </div>
        </div>
        <!--End Page Header-->
        
        <div class="container">
            <div class="row">
                <!-- 侧边栏导航 -->
                <div class="col-xl-2 col-lg-2 col-md-12 md-margin-20px-bottom">
                    <ul class="nav flex-column dashboard-list" role="tablist">
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Account</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-account}">My Orders</a></li>
                        <li><a class="nav-link" th:href="@{/user/my-favorites}">My Favorites</a></li>
                        <li><a class="nav-link active" th:href="@{/user/my-addresses}">Addresses</a></li>
                        <li><a class="nav-link" th:href="@{/notifications}">Notifications</a></li>
                        <li><a class="nav-link" th:href="@{/personal-data}">Personal Data</a></li>
                        <li><a class="nav-link" href="#" onclick="logout()">Logout</a></li>
                    </ul>
                </div>

                <!-- 主要内容 -->
                <div class="col-xl-10 col-lg-10 col-md-12">
                    <div class="dashboard-content padding-30px-all md-padding-15px-all">
                        <div class="section-header style1 d-flex align-items-center justify-content-between mb-4">
                            <div class="section-header-left">
                                <h2>Shipping Addresses</h2>
                                <p>Manage your delivery addresses</p>
                            </div>
                            <div class="section-header-right">
                                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                    <i class="an an-plus"></i> Add New Address
                                </button>
                            </div>
                        </div>

                        <!-- 地址列表 -->
                        <div th:if="${addresses != null and !addresses.isEmpty()}">
                            <div class="row">
                                <div class="col-lg-6" th:each="address : ${addresses}">
                                    <div class="address-card" th:classappend="${address.isDefault} ? 'default'">
                                        <div class="d-flex justify-content-between align-items-start mb-3">
                                            <div>
                                                <h5 class="mb-1" th:text="${address.name}">John Doe</h5>
                                                <span th:if="${address.isDefault}" class="default-badge">Default</span>
                                            </div>
                                            <div class="address-actions">
                                                <button class="btn btn-sm btn-outline-primary" 
                                                        th:onclick="|editAddress('${address.id}')|">
                                                    <i class="an an-edit"></i> Edit
                                                </button>
                                                <button class="btn btn-sm btn-outline-success" 
                                                        th:unless="${address.isDefault}"
                                                        th:onclick="|setDefaultAddress('${address.id}')|">
                                                    <i class="an an-check"></i> Set Default
                                                </button>
                                                <button class="btn btn-sm btn-outline-danger" 
                                                        th:unless="${address.isDefault}"
                                                        th:onclick="|deleteAddress('${address.id}')|">
                                                    <i class="an an-times"></i> Delete
                                                </button>
                                            </div>
                                        </div>
                                        <div class="address-info">
                                            <p class="mb-1"><strong>Phone:</strong> <span th:text="${address.phone}">123-456-7890</span></p>
                                            <p class="mb-1"><strong>Address:</strong></p>
                                            <p class="text-muted" th:text="${address.fullAddress}">123 Main St, City, State, 12345</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 空状态 -->
                        <div th:if="${addresses == null or addresses.isEmpty()}" class="text-center py-5">
                            <i class="an an-map-marker" style="font-size: 4rem; color: #ddd;"></i>
                            <h4 class="mt-3">No Addresses Added Yet</h4>
                            <p class="text-muted">Add your first shipping address to start shopping</p>
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                <i class="an an-plus"></i> Add First Address
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加地址模态框 -->
<div class="modal fade" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addAddressModalLabel">Add New Address</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addAddressForm">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="receiverName" class="form-label">Receiver Name *</label>
                            <input type="text" class="form-control" id="receiverName" name="receiverName" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="receiverPhone" class="form-label">Phone Number *</label>
                            <input type="tel" class="form-control" id="receiverPhone" name="receiverPhone" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="province" class="form-label">Province *</label>
                            <select class="form-control" id="province" name="province" required>
                                <option value="">Select Province</option>
                                <option value="北京">北京</option>
                                <option value="上海">上海</option>
                                <option value="广东">广东</option>
                                <option value="浙江">浙江</option>
                                <option value="江苏">江苏</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="city" class="form-label">City *</label>
                            <input type="text" class="form-control" id="city" name="city" required>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="district" class="form-label">District *</label>
                            <input type="text" class="form-control" id="district" name="district" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label for="detailAddress" class="form-label">Detailed Address *</label>
                            <textarea class="form-control" id="detailAddress" name="detailAddress" rows="3" 
                                      placeholder="Street address, building, apartment number, etc." required></textarea>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="setAsDefault" name="setAsDefault">
                                <label class="form-check-label" for="setAsDefault">
                                    Set as default address
                                </label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveAddressBtn">Save Address</button>
            </div>
        </div>
    </div>
</div>

<!-- Footer -->
<div th:replace="~{include_header::footer}"></div>

<script th:src="@{/assets/js/vendor/jquery-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/modernizr-3.6.0.min.js}"></script>
<script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/plugins.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script>
// 设置默认地址
function setDefaultAddress(addressId) {
    $.post('/user/address/setDefault', {
        addressId: addressId
    }).done(function(response) {
        if (response.success) {
            location.reload();
        } else {
            alert(response.message || 'Failed to set default address');
        }
    }).fail(function() {
        alert('Network error, please try again');
    });
}

// 删除地址
function deleteAddress(addressId) {
    if (confirm('Are you sure you want to delete this address?')) {
        $.post('/user/address/delete', {
            addressId: addressId
        }).done(function(response) {
            if (response.success) {
                location.reload();
            } else {
                alert(response.message || 'Failed to delete address');
            }
        }).fail(function() {
            alert('Network error, please try again');
        });
    }
}

// 编辑地址（这里简化为跳转到编辑页面）
function editAddress(addressId) {
    // 这里可以打开编辑模态框或跳转到编辑页面
    alert('Edit address feature coming soon! Address ID: ' + addressId);
}

// 保存新地址
$(document).ready(function() {
    $('#saveAddressBtn').click(function() {
        const formData = {
            receiverName: $('#receiverName').val(),
            receiverPhone: $('#receiverPhone').val(),
            province: $('#province').val(),
            city: $('#city').val(),
            district: $('#district').val(),
            detailAddress: $('#detailAddress').val(),
            isDefault: $('#setAsDefault').is(':checked')
        };
        
        // 基本验证
        if (!formData.receiverName || !formData.receiverPhone || !formData.province || 
            !formData.city || !formData.district || !formData.detailAddress) {
            alert('Please fill in all required fields');
            return;
        }
        
        // 这里应该调用后端API保存地址
        // 由于地址API可能需要复杂的请求结构，这里先提示
        alert('Add address feature needs backend API integration');
        
        // $.post('/address/add', formData).done(function(response) {
        //     if (response.success) {
        //         $('#addAddressModal').modal('hide');
        //         location.reload();
        //     } else {
        //         alert(response.message || 'Failed to save address');
        //     }
        // });
    });
});

// 用户注销
function logout() {
    if (confirm('Are you sure you want to logout?')) {
        $.post('/user/logout').done(function() {
            window.location.href = '/';
        });
    }
}
</script>

</body>
</html> 